<script setup lang="ts">
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, BarChart, PieChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components';
import ECharts from 'vue-echarts';

use([
  CanvasRenderer,
  LineChart,
  BarChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
]);
import { ref,computed, handleError } from 'vue';
import axios from 'axios';
//模拟数据value的字段对应Y轴，name字段对应X轴
const data=ref([
     {value:80,name:'张三'},
     {value:90,name:'李四'},
     {value:60,name:'王五'},
     {value:70,name:'周六'},
     {value:70,name:'韩七'},
     {value:50,name:'李月'},
     {value:60,name:'田八'},
])
//线型图 
const lineChartoption=computed(()=>{
  return{
    xAxis:{
      type:'category',
      data:data.value.map(v=>v.name)
    },
    yAxis:{
      type:'value',
    },
    series:[
      {
        type:'line',
        data:data.value.map(v=>v.value)
      }
    ]
  }
})
//柱状图
const barChartoption=computed(()=>{
  return{
    xAxis:{
      type:'category',
      data:data.value.map(v=>v.name)
    },
    yAxis:{
      type:'value',
    },
    series:[
      {
        type:'bar',
        data:data.value.map(v=>v.value)
      }
    ]
  }
})
//饼状图
const pieChartoption=computed(()=>{
  return{
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '课程数据分析',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
        show: false,
        position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
          }
        },
        labelLine: {
          show: false
        },
        data: [
          {value:80,name:'张三'},
          {value:90,name:'李四'},
          {value:60,name:'王五'},
          {value:70,name:'周六'},
          {value:70,name:'韩七'},
          {value:50,name:'李月'},
          {value:60,name:'田八'},
        ],
      }
    ]
  }
})

//表头日期选择
const value = ref('')


//表头学校选择
const schoolSelectedValue = ref('')
const schoolOptions = ref([
  {value:'1',name:'沈阳师范大学'},
  {value:'2',name:'沈阳理工大学'},
  {value:'3',name:'沈阳工业大学'}, 
  {value:'4',name:'沈阳航空航天大学'}
])

//表头专业选择
const majorSelectedValue = ref('')
const majorOptions = ref([
  {value:'1',name:'网络工程'},
  {value:'2',name:'计算机科学与技术'},
  {value:'3',name:'软件工程'}, 
  {value:'4',name:'物联网工程'}
])

//表头班级选择
const classSelectedValue = ref('')
const classOptions = ref([
  {value:'1',name:'人工智能1班'},
  {value:'2',name:'人工智能2班'},
  {value:'3',name:'人工智能3班'}, 
  {value:'4',name:'人工智能4班'}
])

//表头课程选择
const courseSelectedValue = ref('')
const courseOptions = ref([
  {value:'1',name:'javascript'},
  {value:'2',name:'html'},
  {value:'3',name:'vue'}, 
  {value:'4',name:'springMVC'}
])

//表头教师选择
const teacherSelectedValue = ref('')
const teacherOptions = ref([
  {value:'1',name:'周一'},
  {value:'2',name:'周二'},
  {value:'3',name:'周三'},
  {value:'4',name:'周四'},
])

//表头学号选择
const studentIdSelectedValue = ref('')
const studentIdOptions = ref([
  {value:'1',name:'20999044'},
  {value:'2',name:'20999072'},
  {value:'3',name:'20999058'},
  {value:'4',name:'20999063'},
])

//表头姓名选择
const studentSelectedValue = ref('')
const studentOptions = ref([
  {value:'1',name:'张三'},
  {value:'2',name:'李四'},
  {value:'3',name:'王五'},
  {value:'4',name:'周六'},
])

//表头学期选择
const termSelectedValue = ref('')
const termOptions = ref([
  {value:'1',name:'第一学期'},
  {value:'2',name:'第二学期'},
  {value:'3',name:'第三学期'},
  {value:'4',name:'第四学期'},
])

//表头成绩趋势选择
const scoreTrendSelectedValue = ref('')
const scoreTrendOptions = ref([
  {value:'1',name:'上升'},
  {value:'2',name:'下降'},
  {value:'3',name:'上升'},
  {value:'4',name:'不变'},
])

//表头排名范围选择
const rankRangeSelectedValue = ref('')
const rankRangeOptions = ref([
  {value:'1',name:'前5'},
  {value:'2',name:'前10'},
  {value:'3',name:'前20'},
  {value:'4',name:'全部'},
])

 //表格数据
 const tableData = ref([
    {id:'1',name:'张三',studentId:'20999044',course:'javascript',time:'367h,45min',times:'156',study:'',post:'人工智能训练师',date:'2025-01-01'},
    {id:'2',name:'李四',studentId:'20999072',course:'html',time:'456h49min',times:'456',study:'',post:'数据分析师',date:'2025-01-02'},
    {id:'3',name:'王五',studentId:'20999058',course:'html',time:'250h45min',times:'158',study:'',post:'测试',date:'2025-01-03'},
    {id:'4',name:'周六',studentId:'20999063',course:'vue',time:'450h12min',times:'420',study:'',post:'前端开发',date:'2025-01-04'},
    {id:'5',name:'韩七',studentId:'20999084',course:'vue',time:'350h35min',times:'260',study:'',post:'实施运维',date:'2025-01-05'},
    {id:'6',name:'李月',studentId:'20999041',course:'springMVC',time:'84h54min',times:'140',study:'',post:'后端开发',date:'2025-01-07'},
    {id:'7',name:'田八',studentId:'20999048',course:'html',time:'120h35min',times:'152',study:'',post:'人工智能训练师',date:'2025-01-04'},
    {id:'8',name:'李一',studentId:'20999046',course:'html',time:'250h14min',times:'45',study:'',post:'测试',date:'2025-01-04'},
    {id:'9',name:'李二',studentId:'20999098',course:'html',time:'360h45min',times:'98',study:'',post:'实施运维',date:'2025-01-04'},
    {id:'10',name:'王三',studentId:'20999015',course:'vue',time:'580h45min',times:'35',study:'',post:'后端开发',date:'2025-01-02'},
    {id:'11',name:'吴一',studentId:'20999056',course:'springMVC',time:'85h12min',times:'360',study:'',post:'前端开发',date:'2025-01-01'},
    {id:'12',name:'吴二',studentId:'20999089',course:'html',time:'65h25min',times:'410',study:'',post:'数据分析师',date:'2025-01-03'},
    {id:'13',name:'吴三',studentId:'20999076',course:'html',time:'360h15min',times:'25',study:'',post:'后端开发',date:'2025-01-04'},
    {id:'14',name:'吴四',studentId:'20999051',course:'html',time:'74h25min',times:'85',study:'',post:'人工智能训练师',date:'2025-01-01'},
    {id:'15',name:'张琪',studentId:'20999020',course:'js',time:'95h36min',times:'74',study:'',post:'测试',date:'2025-01-04'},
    {id:'16',name:'韩乐',studentId:'20999021',course:'html',time:'48h12min',times:'260',study:'',post:'实施运维',date:'2025-01-03'},
    {id:'17',name:'月月',studentId:'20999059',course:'html',time:'198h25min',times:'340',study:'',post:'数据分析师',date:'2025-01-04'},
    {id:'18',name:'笑笑',studentId:'20999013',course:'html',time:'560h24min',times:'58',study:'',post:'前端开发',date:'2025-01-04'},
    {id:'19',name:'小明',studentId:'20999025',course:'vue',time:'620h34min',times:'620',study:'',post:'后端开发',date:'2025-01-04'},
    {id:'20',name:'小美',studentId:'20999078',course:'javascript',time:'450h56min',times:'651',study:'测试',post:'',date:'2025-01-05'},
    {id:'21',name:'小红',studentId:'20999085',course:'html',time:'260h34min',times:'350',study:'',post:'人工智能训练师',date:'2025-01-02'},
    {id:'22',name:'小绿',studentId:'20999043',course:'html',time:'86h45min',times:'45',study:'',post:'测试',date:'2025-01-03'},
    {id:'23',name:'路奇',studentId:'20999005',course:'vue',time:'340h56min',times:'86',study:'',post:'实施运维',date:'2025-01-02'},
    {id:'24',name:'吕三',studentId:'20999009',course:'html',time:'250h12min',times:'198',study:'',post:'前端开发',date:'2025-01-04'},
    {id:'25',name:'天齐',studentId:'20999037',course:'html',time:'65h32min',times:'270',study:'',post:'测试',date:'2025-01-01'},
    {id:'26',name:'佳宇',studentId:'20999039',course:'vue',time:'89h25min',times:'178',study:'',post:'实施运维',date:'2025-01-04'},
    {id:'1',name:'张三',studentId:'20999044',course:'javascript',time:'367h,45min',times:'156',study:'',post:'人工智能训练师',date:'2025-01-01'},
    {id:'2',name:'李四',studentId:'20999072',course:'html',time:'456h49min',times:'456',study:'',post:'数据分析师',date:'2025-01-02'},
    {id:'3',name:'王五',studentId:'20999058',course:'html',time:'250h45min',times:'158',study:'',post:'测试',date:'2025-01-03'},
    {id:'4',name:'周六',studentId:'20999063',course:'vue',time:'450h12min',times:'420',study:'',post:'前端开发',date:'2025-01-04'},
    {id:'5',name:'韩七',studentId:'20999084',course:'vue',time:'350h35min',times:'260',study:'',post:'实施运维',date:'2025-01-05'},
    {id:'6',name:'李月',studentId:'20999041',course:'springMVC',time:'84h54min',times:'140',study:'',post:'后端开发',date:'2025-01-07'},
    {id:'7',name:'田八',studentId:'20999048',course:'html',time:'120h35min',times:'152',study:'',post:'人工智能训练师',date:'2025-01-04'},
    {id:'8',name:'李一',studentId:'20999046',course:'html',time:'250h14min',times:'45',study:'',post:'测试',date:'2025-01-04'},
    {id:'9',name:'李二',studentId:'20999098',course:'html',time:'360h45min',times:'98',study:'',post:'实施运维',date:'2025-01-04'},
    {id:'10',name:'王三',studentId:'20999015',course:'vue',time:'580h45min',times:'35',study:'',post:'后端开发',date:'2025-01-02'},
    {id:'11',name:'吴一',studentId:'20999056',course:'springMVC',time:'85h12min',times:'360',study:'',post:'前端开发',date:'2025-01-01'},
    {id:'12',name:'吴二',studentId:'20999089',course:'html',time:'65h25min',times:'410',study:'',post:'数据分析师',date:'2025-01-03'},
    {id:'13',name:'吴三',studentId:'20999076',course:'html',time:'360h15min',times:'25',study:'',post:'后端开发',date:'2025-01-04'},
    {id:'14',name:'吴四',studentId:'20999051',course:'html',time:'74h25min',times:'85',study:'',post:'人工智能训练师',date:'2025-01-01'},
    {id:'15',name:'张琪',studentId:'20999020',course:'js',time:'95h36min',times:'74',study:'',post:'测试',date:'2025-01-04'},
    {id:'16',name:'韩乐',studentId:'20999021',course:'html',time:'48h12min',times:'260',study:'',post:'实施运维',date:'2025-01-03'},
    {id:'17',name:'月月',studentId:'20999059',course:'html',time:'198h25min',times:'340',study:'',post:'数据分析师',date:'2025-01-04'},
    {id:'18',name:'笑笑',studentId:'20999013',course:'html',time:'560h24min',times:'58',study:'',post:'前端开发',date:'2025-01-04'},
    {id:'19',name:'小明',studentId:'20999025',course:'vue',time:'620h34min',times:'620',study:'',post:'后端开发',date:'2025-01-04'},
    {id:'20',name:'小美',studentId:'20999078',course:'javascript',time:'450h56min',times:'651',study:'测试',post:'',date:'2025-01-05'},
    {id:'21',name:'小红',studentId:'20999085',course:'html',time:'260h34min',times:'350',study:'',post:'人工智能训练师',date:'2025-01-02'},
    {id:'22',name:'小绿',studentId:'20999043',course:'html',time:'86h45min',times:'45',study:'',post:'测试',date:'2025-01-03'},
    {id:'23',name:'路奇',studentId:'20999005',course:'vue',time:'340h56min',times:'86',study:'',post:'实施运维',date:'2025-01-02'},
    {id:'24',name:'吕三',studentId:'20999009',course:'html',time:'250h12min',times:'198',study:'',post:'前端开发',date:'2025-01-04'},
    {id:'25',name:'天齐',studentId:'20999037',course:'html',time:'65h32min',times:'270',study:'',post:'测试',date:'2025-01-01'},
    {id:'26',name:'佳宇',studentId:'20999039',course:'vue',time:'89h25min',times:'178',study:'',post:'实施运维',date:'2025-01-04'},
    {id:'1',name:'张三',studentId:'20999044',course:'javascript',time:'367h,45min',times:'156',study:'',post:'人工智能训练师',date:'2025-01-01'},
    {id:'2',name:'李四',studentId:'20999072',course:'html',time:'456h49min',times:'456',study:'',post:'数据分析师',date:'2025-01-02'},
    {id:'3',name:'王五',studentId:'20999058',course:'html',time:'250h45min',times:'158',study:'',post:'测试',date:'2025-01-03'},
    {id:'4',name:'周六',studentId:'20999063',course:'vue',time:'450h12min',times:'420',study:'',post:'前端开发',date:'2025-01-04'},
    {id:'5',name:'韩七',studentId:'20999084',course:'vue',time:'350h35min',times:'260',study:'',post:'实施运维',date:'2025-01-05'},
    {id:'6',name:'李月',studentId:'20999041',course:'springMVC',time:'84h54min',times:'140',study:'',post:'后端开发',date:'2025-01-07'},
    {id:'7',name:'田八',studentId:'20999048',course:'html',time:'120h35min',times:'152',study:'',post:'人工智能训练师',date:'2025-01-04'},
    {id:'8',name:'李一',studentId:'20999046',course:'html',time:'250h14min',times:'45',study:'',post:'测试',date:'2025-01-04'},
    {id:'9',name:'李二',studentId:'20999098',course:'html',time:'360h45min',times:'98',study:'',post:'实施运维',date:'2025-01-04'},
    {id:'10',name:'王三',studentId:'20999015',course:'vue',time:'580h45min',times:'35',study:'',post:'后端开发',date:'2025-01-02'},
    {id:'11',name:'吴一',studentId:'20999056',course:'springMVC',time:'85h12min',times:'360',study:'',post:'前端开发',date:'2025-01-01'},
    {id:'12',name:'吴二',studentId:'20999089',course:'html',time:'65h25min',times:'410',study:'',post:'数据分析师',date:'2025-01-03'},
    {id:'13',name:'吴三',studentId:'20999076',course:'html',time:'360h15min',times:'25',study:'',post:'后端开发',date:'2025-01-04'},
    {id:'14',name:'吴四',studentId:'20999051',course:'html',time:'74h25min',times:'85',study:'',post:'人工智能训练师',date:'2025-01-01'},
    {id:'15',name:'张琪',studentId:'20999020',course:'js',time:'95h36min',times:'74',study:'',post:'测试',date:'2025-01-04'},
    {id:'16',name:'韩乐',studentId:'20999021',course:'html',time:'48h12min',times:'260',study:'',post:'实施运维',date:'2025-01-03'},
    {id:'17',name:'月月',studentId:'20999059',course:'html',time:'198h25min',times:'340',study:'',post:'数据分析师',date:'2025-01-04'},
    {id:'18',name:'笑笑',studentId:'20999013',course:'html',time:'560h24min',times:'58',study:'',post:'前端开发',date:'2025-01-04'},
    {id:'19',name:'小明',studentId:'20999025',course:'vue',time:'620h34min',times:'620',study:'',post:'后端开发',date:'2025-01-04'},
    {id:'20',name:'小美',studentId:'20999078',course:'javascript',time:'450h56min',times:'651',study:'测试',post:'',date:'2025-01-05'},
    {id:'21',name:'小红',studentId:'20999085',course:'html',time:'260h34min',times:'350',study:'',post:'人工智能训练师',date:'2025-01-02'},
    {id:'22',name:'小绿',studentId:'20999043',course:'html',time:'86h45min',times:'45',study:'',post:'测试',date:'2025-01-03'},
    {id:'23',name:'路奇',studentId:'20999005',course:'vue',time:'340h56min',times:'86',study:'',post:'实施运维',date:'2025-01-02'},
    {id:'24',name:'吕三',studentId:'20999009',course:'html',time:'250h12min',times:'198',study:'',post:'前端开发',date:'2025-01-04'},
    {id:'25',name:'天齐',studentId:'20999037',course:'html',time:'65h32min',times:'270',study:'',post:'测试',date:'2025-01-01'},
    {id:'26',name:'佳宇',studentId:'20999039',course:'vue',time:'89h25min',times:'178',study:'',post:'实施运维',date:'2025-01-04'},
])

//分页功能
const currentPage = ref(1)//当前页码
const pageSize = ref(20)//每页显示条数

const paginatedDate = computed(() =>{
  const start = (currentPage.value - 1) * pageSize.value//计算当前页的起始索引
  const end = start + pageSize.value//计算当前页的结束索引
  return tableData.value.slice(start,end)//使用slice方法从tabledata中提取当前页的数据，slice(start,end)返回从start开始到end（不包括end）结束的子数组
})

//每页页码改变时触发
const handleCurrentChange = (newPage)=>{
  currentPage.value = newPage
}

//每页条数发生改变时触发
const handleSizeChange = (newSize)=>{
  pageSize.value = newSize 
}

//导出文件
const exportData = async ()=> {
  try{
    const response = await axios.get("",{
      responseType: "blob"//确保返回的数据是blob类型，可以直接下载
    })

    //创建下载链接
    const url = window.URL.createObjectURL(new Blob([response.data]))

    const link = document.createElement('a')
    link.href = url
    link.download = "课程.xlsx"//设置下载文件的名称
    link.click()//模拟点击链接，触发下载事件

    //释放下载链接
    window.URL.revokeObjectURL(url)
  }catch(error){
    console.error("导出失败：",error)
  }
}

const resetSelect = () => {
  schoolSelectedValue.value = null;
  majorSelectedValue.value = null;
  classSelectedValue.value = null;
  courseSelectedValue.value = null;
  teacherSelectedValue.value = null;
  studentIdSelectedValue.value = null;
  studentSelectedValue.value = null;
  termSelectedValue.value = null;
  scoreTrendSelectedValue.value = null;
  rankRangeSelectedValue.value = null;
  value.value = "";
};
</script>

<template>
  <div class="common-layout" >
    <el-container>
      <el-header style="margin: 20px 0;">
        <el-text style="font-size: 30px; font-family: Arial, Helvetica, sans-serif;">
          课程分析
          <el-button type="primary" size="large" style="margin-left: 15px;" @click="exportData">导出文件</el-button>
          <el-button type="primary" size="large" style="margin-left: 15px;" @click="resetSelect()">重置选择</el-button>
        </el-text>
        <el-row  style="padding-top:15px;">
          <el-col :span="4" >
            <el-select v-model="schoolSelectedValue" placeholder="选择学校" size="large" class="select-col1">
              <el-option v-for="item in schoolOptions" :key="item.value" :label="item.name" :value="item.value"/>
            </el-select>
          </el-col>
          <el-col :span="4" >
            <el-select v-model="majorSelectedValue" placeholder="选择专业" size="large" class="select-col1">
              <el-option v-for="item in majorOptions" :key="item.value" :label="item.name" :value="item.value"/>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="classSelectedValue" placeholder="选择班级" size="large" class="select-col1">
              <el-option v-for="item in classOptions" :key="item.value" :label="item.name" :value="item.value"/>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="courseSelectedValue" placeholder="选择课程" size="large"  class="select-col1">
              <el-option v-for="item in courseOptions" :key="item.value" :label="item.name" :value="item.value"/>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-date-picker v-model="value" clearable="true" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="large" style="width: 417px; height: 39px; padding-bottom: 4px;" class="select-col2"></el-date-picker>
          </el-col>
        </el-row>
      </el-header>
      <el-header style="margin-top: 20px; margin-bottom: 0;">
        <el-row  style="padding-top:15px;">
          <el-col :span="4">
            <el-select v-model="teacherSelectedValue" placeholder="选择教师" size="large" class="select-col1">
              <el-option v-for="item in teacherOptions" :key="item.value" :label="item.name" :value="item.value"/>
            </el-select>
          </el-col>
          <el-col :span="4" >
            <el-select v-model="studentIdSelectedValue" placeholder="选择学号" size="large" class="select-col1">
              <el-option v-for="item in studentIdOptions" :key="item.value" :label="item.name" :value="item.value"/>
            </el-select>
          </el-col>
          <el-col :span="4" >
            <el-select v-model="studentSelectedValue" placeholder="选择姓名" size="large" class="select-col1">
              <el-option v-for="item in studentOptions" :key="item.value" :label="item.name" :value="item.value"/>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="termSelectedValue" placeholder="选择学期" size="large"  class="select-col1">
              <el-option v-for="item in termOptions" :key="item.value" :label="item.name" :value="item.value"/>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="scoreTrendSelectedValue" placeholder="成绩趋势" size="large"  class="select-col2">
              <el-option v-for="item in scoreTrendOptions" :key="item.value" :label="item.name" :value="item.value"/>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="rankRangeSelectedValue" placeholder="排名范围" size="large"  class="select-col2">
              <el-option v-for="item in rankRangeOptions" :key="item.value" :label="item.name" :value="item.value"/>
            </el-select>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <div class="table">
          <!--default-sort属性可以设置默认排序，prop属性设置排序字段，order属性设置排序方式:descending表示降序，ascending表示升序-->
          <el-table :data="paginatedDate" :default-sort="{prop:'studentId,time,times,date',order:'descending'}"  height="380" style="width: 99.5%; margin-top: 0px;" class="table-border">
            <el-table-column prop="name" label="姓名"  />
            <el-table-column prop="studentId" sortable label="学号" />
            <el-table-column prop="course" label="课程" />
            <el-table-column prop="time" sortable label="时长" />
            <el-table-column prop="times" sortable label="次数" />
            <el-table-column prop="study" label="学习成果" />
            <el-table-column prop="post" label="适配岗位" />
            <el-table-column prop="date" sortable label="日期" />
          </el-table><!--分页-->
          <el-pagination v-model="currentPage" 
                        :page-size="pageSize" 
                        :total="tableData.length"
                        layout=" prev, pager, next, jumper"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"/>
        <!--v-model:current-page: 双向绑定当前页码/ v-model:page-size: 双向绑定每页显示条数/:total: 数据的总条数，这里是tableData的长度-->
        <!--layout: 分页器布局，定义显示哪些元素 prev:上一页 pager：页码 next：下一页 jumper：跳转到指定页/ @size-change: 每页条数改变时触发的事件/ @current-change: 当前页码改变时触发的事件-->
        </div>
        <div class="chartgroups">
            <!-- 折线图-->
            <e-charts class="chart" :option="lineChartoption" />
            <!-- 柱状图 -->
            <e-charts class="chart" :option="barChartoption" />
            <!-- 饼状图 -->
            <e-charts class="chart" :option="pieChartoption" />
        </div> 
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
.select-col1 {
  position: relative;
  /* margin-right: 0px; */
  height:20px;
  width: 215px;
}
.select-col2 {
  position: relative;
  margin: 0px;
  height:20px;
  width: 215px;
}
.table-border {
  border-collapse: collapse; /* 确保边框合并 */
  border: 2px solid #dfe1e1; /* 外边框样式 */
  border-radius: 10px; /* 边框圆角 */
  box-shadow: 1px 1px 1px #dfe1e1; /* 阴影 */
}
.el-pagination {
  margin-top: 20px;
  justify-content: center;
}
.chartgroups {
    display: flex;
    justify-content: space-between;
}
.chart {
  position: relative;
  height: 400px; /* 设置图表高度 */
  width: 400px;
}
</style>